<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>控制面板 - 文档管理系统</title>
    <link rel="stylesheet" href="/css/style.css">
    <style>
        .dashboard-stats {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        .stat-card {
            background-color: #fff;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            text-align: center;
        }
        .stat-value {
            font-size: 2.5rem;
            font-weight: bold;
            color: #007bff;
            margin: 10px 0;
        }
        .stat-label {
            color: #666;
            font-size: 1rem;
        }
        .shortcuts {
            margin-top: 40px;
        }
        .shortcut-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 15px;
            margin-top: 15px;
        }
        .shortcut-card {
            display: flex;
            align-items: center;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 8px;
            transition: all 0.3s ease;
            text-decoration: none;
            color: #333;
        }
        .shortcut-card:hover {
            background-color: #e9ecef;
            transform: translateY(-3px);
        }
        .shortcut-icon {
            font-size: 24px;
            width: 40px;
            text-align: center;
            margin-right: 15px;
        }
        .shortcut-text {
            font-weight: bold;
        }
        
        /* 新的欢迎消息样式 */
        .welcome-message {
            background: linear-gradient(135deg, rgba(13, 71, 161, 0.7), rgba(33, 150, 243, 0.5));
            border-left: 4px solid #00c7be;
            padding: 25px;
            margin-bottom: 30px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            animation: pulse-glow 3s infinite;
            position: relative;
            overflow: hidden;
        }
        
        .welcome-message::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(
                to bottom right,
                rgba(10, 132, 255, 0.1),
                rgba(94, 92, 230, 0.1),
                rgba(0, 199, 190, 0.1)
            );
            transform: rotate(30deg);
            z-index: -1;
            pointer-events: none;
            animation: rotate 15s linear infinite;
        }
        
        .welcome-message h2 {
            font-size: 2rem;
            margin-bottom: 10px;
            background: linear-gradient(to right, #ffffff, #4ef2f8);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0 0 10px rgba(78, 242, 248, 0.5);
            animation: text-flicker 5s infinite;
        }
        
        .welcome-message p {
            color: #ffffff;
            font-size: 1.1rem;
            line-height: 1.6;
            letter-spacing: 0.5px;
            text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
        }
        
        .welcome-message span {
            color: #4ef2f8;
            font-weight: bold;
            position: relative;
            display: inline-block;
            text-shadow: 0 0 10px rgba(78, 242, 248, 0.8);
            animation: name-highlight 4s infinite;
        }
        
        @keyframes pulse-glow {
            0% { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); }
            50% { box-shadow: 0 5px 25px rgba(0, 199, 190, 0.5); }
            100% { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); }
        }
        
        @keyframes rotate {
            0% { transform: rotate(30deg); }
            100% { transform: rotate(390deg); }
        }
        
        @keyframes text-flicker {
            0% { opacity: 1; }
            3% { opacity: 0.8; }
            6% { opacity: 1; }
            7% { opacity: 0.9; }
            8% { opacity: 1; }
            9% { opacity: 0.9; }
            10% { opacity: 1; }
            100% { opacity: 1; }
        }
        
        @keyframes name-highlight {
            0% { transform: scale(1); text-shadow: 0 0 10px rgba(78, 242, 248, 0.8); }
            50% { transform: scale(1.05); text-shadow: 0 0 20px rgba(78, 242, 248, 1); }
            100% { transform: scale(1); text-shadow: 0 0 10px rgba(78, 242, 248, 0.8); }
        }
    </style>
</head>
<body>
    <div class="dashboard-container">
        <div class="sidebar">
            <div class="sidebar-header">
                <h2>控制面板</h2>
            </div>
            <ul class="sidebar-menu">
                <li class="active"><a href="/dashboard">主页</a></li>
                <li><a href="/dashboard/profile">个人信息</a></li>
                <li><a href="/dashboard/change-password">修改密码</a></li>
                <li><a href="/dashboard/documents">文档管理</a></li>
                <li><a href="/" target="_blank">访问首页</a></li>
                <li><a href="/logout">退出登录</a></li>
            </ul>
        </div>
        
        <div class="main-content">
            <div class="dashboard-header">
                <div class="dashboard-title">
                    <h1>控制面板</h1>
                </div>
            </div>
            
            <div class="welcome-message">
                <h2>欢迎回来，<span th:text="${user.fullName}">用户</span>！</h2>
                <p>这是您的个人控制面板，您可以在这里管理您的个人信息和文档。</p>
            </div>
            
            <div class="shortcuts">
                <h2>快捷链接</h2>
                <div class="shortcut-list">
                    <a href="/dashboard/profile" class="shortcut-card">
                        <div class="shortcut-icon">👤</div>
                        <div class="shortcut-text">更新个人信息</div>
                    </a>
                    <a href="/dashboard/change-password" class="shortcut-card">
                        <div class="shortcut-icon">🔒</div>
                        <div class="shortcut-text">修改密码</div>
                    </a>
                    <a href="/dashboard/documents" class="shortcut-card">
                        <div class="shortcut-icon">📝</div>
                        <div class="shortcut-text">管理文档</div>
                    </a>
                    <a href="/dashboard/documents/create" class="shortcut-card">
                        <div class="shortcut-icon">➕</div>
                        <div class="shortcut-text">创建新文档</div>
                    </a>
                    <a href="/" target="_blank" class="shortcut-card">
                        <div class="shortcut-icon">🏠</div>
                        <div class="shortcut-text">查看首页</div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    
    <script src="/js/script.js"></script>
</body>
</html> 